<template>
    <div id="center-bar" style="width: 100%; height: 580px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'

import echarts from '@/echarts'

import { option } from './constant'
import { peopleChange } from '../../constant'

export default defineComponent({
    name: 'CenterBar',
    setup() {
        const constant = {
            option
        }
        onMounted(async () => {
            let { option } = constant
            option.xAxis[0].data = peopleChange.map((item: any) => item.year)
            option.series[0].data = peopleChange.map((item: any) => item.povertyIncome)
            option.series[1].data = peopleChange.map((item: any) => item.provinceIncome)
            option.series[2].data = peopleChange.map((item: any) =>
                ((item.povertyIncome * 100) / item.provinceIncome).toFixed(2)
            )
            echarts.init(document.getElementById('center-bar')).setOption(option)
        })

        return {
            ...constant
        }
    }
})
</script>
